<template>
  <div class="home">
    <h1>当前姓名:{{ names.familyName }}</h1>
    <h1>当前年龄:{{ names.age }}</h1>
    <h1>当前薪水:{{ names.job.salary }}K</h1>
    <button @click="names.familyName += '!'">点击加!</button> <br>
    <button @click="names.age++">点击加一</button><br>
    <button @click="names.job.salary++">点击薪水加一</button>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";
let names = reactive({
  familyName: "chen",
  age: 23,
  job: {
    salary: 10,
  },
});
watch(
  names,
  (newValue, oldValue) => {
    console.log(`names改变了`, newValue, oldValue);
  },
  { deep: false }
);
</script>